<template>
  <div>
    <el-row>
      <el-col :span="22" :offset="1">
        <div class="grid-content bg-purple">
          <!--卡片shart-->
          <el-card class="box-card" style="width: 1500px;height: 800px">
            <div style="margin:0 20px;">
              <el-table :data="tableData" :header-cell-style="{lineHeight:'60px'}" border style="width: 100%">
                <el-table-column fixed prop="id" label="id" width="100"></el-table-column>
                <el-table-column fixed prop="loanapplicationId" label="贷款申请表id" width="120"></el-table-column>
                <el-table-column fixed prop="repaymentTime" label="还款时间" width="140"></el-table-column>
                <el-table-column fixed prop="paymentMode" label="还款方式" width="140"></el-table-column>
                <el-table-column fixed prop="payableAmount" label="应还款金额" width="140"></el-table-column>
                <el-table-column prop="payableInterest" label="应还款利息" width="140"></el-table-column>
                <el-table-column prop="payableAmountTotal" label="应还款总额" width="140"></el-table-column>
                <el-table-column prop="outstandingAmount" label="未还款金额" width="140"></el-table-column>
                <el-table-column prop="paymentStatus" label="还款状态" width="140"></el-table-column>

                <el-table-column fixed="right" label="操作" width="160">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                    <el-button type="text" @click="findById(scope.row)">修改</el-button>

                  </template>
                </el-table-column>
              </el-table>
              <el-dialog title="还款操作" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="贷款申请表id" :label-width="formLabelWidth"><el-input v-model="form.loanapplicationId" autocomplete="off"></el-input></el-form-item>
                  <el-form-item label="还款时间" :label-width="formLabelWidth"><el-input v-model="form.repaymentTime" autocomplete="off"></el-input></el-form-item>
                  <el-form-item label="还款方式" :label-width="formLabelWidth"><el-input v-model="form.paymentMode" autocomplete="off"></el-input></el-form-item>
                  <el-form-item label="应还款金额" :label-width="formLabelWidth"><el-input v-model="form.payableAmount" autocomplete="off"></el-input></el-form-item>
                  <el-form-item label="应还款利息" :label-width="formLabelWidth"><el-input v-model="form.payableInterest" autocomplete="off"></el-input></el-form-item>
                  <el-form-item label="应还款总额" :label-width="formLabelWidth"><el-input v-model="form.payableAmountTotal" autocomplete="off"></el-input></el-form-item>
                  <el-form-item label="未还款金额" :label-width="formLabelWidth"><el-input v-model="form.outstandingAmount" autocomplete="off"></el-input></el-form-item>
                  <el-form-item label="还款状态" :label-width="formLabelWidth"><el-input v-model="form.paymentStatus" autocomplete="off"></el-input></el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="committ">确 定</el-button>
                </div>
              </el-dialog>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios'
    export default {
      methods: {
        handleClick(row) {
          axios.post("http://localhost:9999/credit-repayment/deleteById",{id:row.id}).then(res=>{
            if(res.data.code==200){
              this.findAll()
            }
          })
        },
        findAll:function () {
          axios.get("http://localhost:9999/credit-repayment/findAll").then(res=>{
            alert(res.data.message)
            this.tableData=res.data.message
          })
        },
        findById(row){
          this.dialogFormVisible = true
          this.form=row
        },
        committ:function () {
          axios.post("http://localhost:9999/credit-repayment/insertOrUpdate",this.form).then(res=>{
            this.dialogFormVisible=false
          })
        }
      },
      data() {
        return {
          tableData: [],
          dialogFormVisible: false,
          form: {},
          formLabelWidth: '120px'
        }
      },
      mounted(){
        this.findAll()
      }
    }
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }
</style>
